<template>
<div class="content-wrapper">
  <!-- 加载中开始 -->
  <div class="loading-wrapper" v-if="isLoading">
    <me-loading/>
  </div>
  <!-- 加载中结束 -->
  <me-scroll
    ref="scroll"
    :data="content"
    @scroll="scroll"
    @scrollEnd="scrollEnd"
  >
    <!-- 分类右侧的内容开始 -->
    <div class="category-content">
      <!-- banner区开始 -->
      <a :href="content.banner.linkUrl" class="link-url" v-if="content.banner">
        <img :src="content.banner.picUrl" alt="" class="pic-url">
      </a>
      <!-- banner区结束 -->
      <!-- 分类细分区域开始 -->
      <section  class="section"
        v-for="(item,index) of content.data"
        :key="index">
        <h3 class="section-name">{{item.name}}</h3>
        <div class="section-content">
          <div class="product-item"
            v-for="(element,index) of item.itemList"
            :key="index">
            <a :href="element.linkUrl" class="link-url">
              <img :src="element.picUrl" alt="" class="pic-url">
            </a>
            <div class="product-name">{{element.name}}</div>
          </div>
        </div>
      </section>
      <!-- 分类细分区域开始 -->
    </div>
    <!-- 分类右侧的内容结束 -->
  </me-scroll>
  <div class="g-backtop-container" ref="backTopWrapper" v-show="ifBackTopShow">
    <me-back-top @backTop="backTop"/>
  </div>
</div>
</template>
<script>
import { getContentInfo } from '@/api/category'
import meScroll from '@/base/me-scroll.vue'
import meLoading from '@/base/me-loading.vue'
import meBackTop from '@/base/me-back-top'
import storage from '@/assets/js/storage'
import { CATEGORY_CONTENT_KEY, CATEGORY_CONTENT_KEY_INTERVAL } from './config'
export default {
  name: 'categoryContent',
  props: {
    curId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      content: {},
      isLoading: false,
      ifBackTopShow: true
    }
  },
  components: {
    meBackTop,
    meScroll,
    meLoading
  },
  watch: {
    curId (id) {
      this.isLoading = true
      this.getInfo(id).then(() => {
        this.backTop(0)
        // setTimeout(()=>{
        //   this.isLoading = false
        // },10000) 
        this.isLoading = false
      })
    }
  },
  methods: {
    scroll (swiper, translate) { // 拖拽事件
      this.ifBackTopShow = -translate > swiper.height // 若向上拖拽距离比swiper-container大，显示返回顶部图标
    },
    scrollEnd (swiper, translate, pulling) { // 滑动事件
      this.ifBackTopShow = -translate > swiper.height // 若向上滑动停止时的距离比swiper-container的高度大，显示返回顶部图标
    },
    getInfo (id) { // 获取分类页右侧的内容数据
      if (storage.get(CATEGORY_CONTENT_KEY, {})[id]) { // 若缓存中存在数据
        if (new Date().getTime() - storage.get(CATEGORY_CONTENT_KEY)[id].updateTime > CATEGORY_CONTENT_KEY_INTERVAL) { // 若缓存超时
          return this.getContentByHttp(id)
        } else { // 若缓存未超时
          this.content = storage.get(CATEGORY_CONTENT_KEY)[id]
          return Promise.resolve()
        }
      } else { // 若缓存中不存在数据
        return this.getContentByHttp(id)
      }
    },
    backTop (speed) { // 回到顶部
      this.$refs.scroll.scrollToTop(speed)
    },
    getContentByHttp (id) { // 去服务器获取数据
      return getContentInfo(id).then((data) => {
        return new Promise(resolve => {
          if (data) {
            this.content = data
            this.updateLocalStorage(id, this.content, new Date().getTime())
            resolve()
          }
        })
      })
    },
    updateLocalStorage (id, content, updateTime) { // 更新缓存
      let contents = storage.get(CATEGORY_CONTENT_KEY, {})
      contents[id] = content
      contents[id].updateTime = updateTime
      storage.set(CATEGORY_CONTENT_KEY, contents)
    }
  }
}
</script>
<style lang="stylus" scoped>
.content-wrapper
  width 100%
  height 100%
.loading-wrapper
  width 100%
  height 100%
  display flex
  justify-content center
  align-items center
  background #eee
.category-content
  width 100%
  padding 7px
  .link-url
    height 0
    width 100%
    margin-bottom 10px
    display block
    padding-bottom 33.9622%
    .pic-url
      width 100%
  .section
    margin 10px 0
    .section-name
      height 30px
      line-height 30px
      font-size 18px
      margin-bottom 2px
    .section-content
      background #fff
      display flex
      flex-wrap wrap
      .product-item
        width 33.3%
        padding 10px
        display flex
        flex-direction column
        align-items center
        .link-url
          height 0
          width 100%
          padding-bottom 100%
          .pic-url
            width 100%
        .product-name
          font-size 18px
.back-top-wrapper
  position absolute
  right 20px
  bottom 60px
  z-index 100
</style>
